<template>
      <div 
        :class="['nav-item',{ active : myIndex === curIndex}]"
        @click="changeItem(myIndex)"
      >{{ item }}</div>
</template>

<script>
export default {
  name: 'nav-item',
  props: ['item', 'myIndex', 'curIndex'],
  methods: {
    changeItem(index) {
      this.$emit('update:curIndex', index);
    }
  }
}
</script>

<style lang="scss">
.nav-item {
  float: left;
  width: 100px;
  height: 50px;
  text-align: center;
  line-height: 50px;
  cursor: pointer;

  &.active {
    background-color: orange;
    color: #999;
  }
}
</style>
